<template>
	<view class="wrap">
		<view class="tab">
			<text :class="leaveStatusStr == 'N' ? 'active' : ''" v-text="`待审批${pendingApproval}`" @click="changeTab('N')"></text>
			<text :class="leaveStatusStr == 'Y' ? 'active' : ''" v-text="`已审批${approved}`" @click="changeTab('Y')"></text>
		</view>
		<view class="search">
			<image src="@/static/search.png"></image>
			<input type="text" placeholder="搜索姓名" @input="debounce('getList',1000)" v-model="name" />
		</view>
		<view class="blockBox"></view>
		<view v-if="isInit" class="list">
			<noRecord v-if="menuInfo.list.length == 0" :info="info"></noRecord>
			<menuBox v-else :menuInfo="menuInfo" @loadMore="addPage"></menuBox>
		</view>
	</view>
</template>

<script>
import menuBox from '@/wxcomponents/commonLayout/menuList.vue';
import noRecord from '@/wxcomponents/commonLayout/noRecord.vue';
import { getDictName, dectList } from '@/libs/common.js';
import userMixins from '@/libs/userMixins.js'
import approvalMixins from '@/libs/approvalMixins.js'

export default {
	mixins: [userMixins, approvalMixins],
	data() {
		return {
			leaveStatusStr: 'N', //tab切换状态 待审批为N      已审批为Y
			pendingApproval: '', //待审批数量
			approved: '', //已审批数量
			isInit: false,
			info: '没有记录!',
			name: '',
			menuInfo: {
				base: {
					menuProp: ['name', 'time', 'status'],
					tit: ['姓名', '申请时间', '状态'],
					class: 'typeOne',
					loadMore: true
				},
				list: []
			},
			pageParams: {
				pageNum: 1,
				pageSize: 20
			},
			module: '',	// 模块名
		};
	},
	onShow() {
		let pageOptions = this.getPageOptions();
		this.module = pageOptions.module;
		this.getList();
	},
	methods: {
		async getList() {
			this.pageFetchData(this.module);
		},
		//审批状态切换
		async changeTab(e) {
			this.isInit = false;
			this.menuInfo.list = [];
			this.leaveStatusStr = e;
			this.pageParams = {
				pageNum: 1,
				pageSize: 20
			};
			this.menuInfo.base.loadMore = true
			this.getList(e);
		},
		// 加载下一页
		addPage() {
			this.pageParams.pageNum++;
			this.getList();
		},
	},
	components: { menuBox, noRecord }
};
</script>

<style lang="scss" scoped>
[v-cloak] {
	display: none !important;
}
.wrap {
	position: relative;
	background: #ffffff;
}
.tab {
	width: 650upx;
	height: 72upx;
	background: rgba(218, 221, 229, 1);
	border-radius: 8upx;
	margin: 20upx auto;
	padding: 4upx 5upx;
	position: fixed;
	top: 0;
	left: 50upx;
	z-index: 9;
	text {
		width: 320upx;
		height: 64upx;
		display: inline-block;
		text-align: center;
		color: #999999;
	}

	.active {
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 2upx 10upx 0px rgba(0, 0, 0, 0.1);
		border-radius: 8upx;
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		line-height: 64upx;
	}
}
.search {
	width: 650upx;
	margin: 20upx auto;
	border: 1upx solid #ddd;
	height: 60upx;
	border-radius: 30upx;
	position: fixed;
	top: 92upx;
	left: 50upx;
	z-index: 9;
	image {
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 5upx;
		left: 10upx;
	}
	input {
		width: 590upx;
		height: 50upx;
		position: absolute;
		left: 60upx;
		top: 5upx;
		color: #999;
		font-size: 28upx;
	}
	.input-placeholder {
		color: #999;
		font-size: 28upx;
	}
}
.list {
	position: fixed;
	z-index: 8;
	top: 200upx;
	width: 100%;
}
.blockBox {
	width: 100%;
	height: 200upx;
}
</style>
